import React, { Component } from 'react';
import { Search, Dropdown, TreeSelect, List, Image } from 'antd-mobile'
import { getCitys, getList } from '../../api/index'
class Index extends Component {
  state = {
    citys: [],
    // 地区
    area: '',
    // 排序  A 升序  B 降序  
    sortType: 'A',
    // 几居
    type: '',
    list: [],
    value: ''
  }
  async getCitysAndSet() {
    const resp = await getCitys()
    this.setState({
      citys: resp.data.data
    })
  }
  async getListAndSet() {
    const resp = await getList()
    this.setState({
      list: resp.data.data
    })
  }
  filterList() {
    const { list, area, sortType, type, value } = this.state
    return list.filter(item => {
      return item.area.includes(area)
    }).sort((a, b) => {
      return sortType === 'A' ? a.price - b.price : b.price - a.price
    }).filter(item => {
      if( type === '') {
        return true
      }
      return +item.type === +type
    }).filter(item => item.title.includes(value))
  }
  componentDidMount() {
    this.getCitysAndSet()
    this.getListAndSet()
  }
  render() {
    const { citys, area, list, value } = this.state
    return (
      <div>
         <Search placeholder='请输入内容' value={value} onChange={ (value) => this.setState({ value })  }/>
         {/* 下拉 */}
         <Dropdown>
          <Dropdown.Item key='a' title='区域' closeOnContentClick>
            <div style={{ padding: 12 }}>
              <TreeSelect
                defaultValue={['1', '2']}
                options={citys}
                onChange={(value, nodes) => {
                  console.log(nodes);
                  if(value.length >= 2) {
                    // 收起来 
                    this.setState({
                      area: nodes.options[1].label
                    })
                  }
                }}
              />
            </div>
          </Dropdown.Item>
          <Dropdown.Item key='b' title='价格' closeOnContentClick>
            <p>
              <b onClick={ () => this.setState({ sortType: 'A' }) }>按照价格升序</b>
            </p>
            <p>
              <b onClick={ () => this.setState({ sortType: 'B' }) }>按照价格降序</b>
            </p>  
          </Dropdown.Item>
          <Dropdown.Item key='c' title='户型' closeOnContentClick>
            <p>
              <input name="type" type="radio" value="1" onChange={ () => this.setState({type: 1}) }/> 一居
            </p>
            <p>
              <input name="type" type="radio" value="2" onChange={ () => this.setState({type: 2}) }/> 二居
            </p>
            <p>
              <input name="type" type="radio" value="3" onChange={ () => this.setState({type: 3}) }/> 三居
            </p>
            <p>
              <input name="type" type="radio" value="4" onChange={ () => this.setState({type: 4}) }/> 四居
            </p>
          </Dropdown.Item>
          <Dropdown.Item key='d' title='户型'>
            <div style={{ padding: 12 }}>
              商机筛选内容
              <br />
              商机筛选内容
              <br />
              商机筛选内容
              <br />
            </div>
          </Dropdown.Item>
        </Dropdown>
        
        <List>
          {this.filterList().map(user => (
            <List.Item
              key={user.id}
              prefix={
                <Image
                  src={user.url}
                  fit='cover'
                  width={40}
                  height={40}
                />
              }
              description={user.desc}
              extra={user.area}
            >
              {user.title}
              <p>单价： { user.price }/{ user.type }间/月</p>
            </List.Item>
          ))}
        </List>

      </div>
    );
  }
}

export default Index;
